<template>
  <div class="box">
    <div class="material-information">
      <div class="reback">
        <el-icon size="24" @click="back"><ArrowLeftBold /></el-icon>
      </div>
      <div class="suppliers-title">
        <div class="line" />
        <span>基本信息</span>
      </div>
      <el-form
        ref="ruleFormRef"
        style="padding: 2rem 1rem; display: flex; flex-wrap: wrap; justify-content: space-between"
        :model="ruleForm"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="供应商编码:" prop="suppliersId" class="materialinput">
          <span>{{ ruleForm.erpCode }}</span>
        </el-form-item>
        <el-form-item label="供应商名称:" prop="suppliersName" class="materialinput">
          <span>{{ ruleForm.supplierName }}</span>
        </el-form-item>
        <el-form-item label="租户编码:" prop="usersId" class="materialinput">
          <span>{{ ruleForm.tenantId }}</span>
        </el-form-item>
        <el-form-item label="电话:" prop="tel" class="materialinput">
          <span>{{ ruleForm.phone }}</span>
        </el-form-item>
        <el-form-item label="ERP编码:" prop="erpId" class="materialinput">
          <span>{{ ruleForm.erpCode }}</span>
        </el-form-item>
        <el-form-item label="增值税登记号:" prop="VATid" class="materialinput">
          <span>{{ ruleForm.vatRegistrationNumber }}</span>
        </el-form-item>
        <el-form-item label="传真:" prop="fax" class="materialinput">
          <span>{{ ruleForm.fax }}</span>
        </el-form-item>
        <el-form-item label="国家:" prop="countries" class="materialinput">
          <span>{{ ruleForm.country }}</span>
        </el-form-item>
        <el-form-item label="省份:" prop="provinces" class="materialinput">
          <span>{{ ruleForm.province }}</span>
        </el-form-item>
        <el-form-item label="城市:" prop="city" class="materialinput">
          <span>{{ ruleForm.city }}</span>
        </el-form-item>
        <el-form-item label="街道门牌:" prop="Streetsign" class="materialinput">
          <span>{{ ruleForm.streetSign }}</span>
        </el-form-item>
        <el-form-item label="语言:" prop="lange" class="materialinput">
          <span>{{ ruleForm.language }}</span>
        </el-form-item>
        <el-form-item label="邮编:" prop="zipcode" class="materialinput">
          <span>{{ ruleForm.postcode }}</span>
        </el-form-item>
        <el-form-item label="网址:" prop="website" class="materialinput">
          <span>{{ ruleForm.website }}</span>
        </el-form-item>
        <el-form-item label="账号组:" prop="accountgroup" class="materialinput">
          <span>{{ ruleForm.accountGroup }}</span>
        </el-form-item>
        <el-form-item label="备注:" prop="remarks" class="materialinput">
          <span>{{ ruleForm.headerDescription }}</span>
        </el-form-item>
        <el-form-item label="创建人:" prop="founder" class="materialinput">
          <span>{{ ruleForm.createBy }}</span>
        </el-form-item>
        <el-form-item label="创建时间:" prop="createtime" class="materialinput">
          <span>{{ ruleForm.createTime }}</span>
        </el-form-item>
        <el-form-item label="修改人:" prop="modifier" class="materialinput">
          <span>{{ ruleForm.updateBy }}</span>
        </el-form-item>
        <el-form-item label="更新时间:" prop="updatetime" class="materialinput">
          <span>{{ ruleForm.updateTime }}</span>
        </el-form-item>
      </el-form>
    </div>
    <div class="material-addinformation">
      <div class="suppliers-title">
        <div class="line" />
        <span>明细信息</span>
      </div>
      <el-menu :default-active="activeIndex" class="el-menu-demo nemulist" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">联系人信息</el-menu-item>
        <el-menu-item index="2">银行信息</el-menu-item>
      </el-menu>
      <div v-if="activeIndex == '1'" style="margin-top: 15px">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          size="default"
          :header-cell-style="{ backgroundColor: '#F8F8F9', color: '#333', fontSize: '14px' }"
        >
          <el-table-column prop="name" label="姓名" align="center" />
          <el-table-column prop="tel" label="电话" align="center" />
          <el-table-column prop="phone" label="手机" align="center" />
          <el-table-column prop="email" label="电邮" align="center" />
          <el-table-column prop="remarks" label="备注" align="center" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules, TableColumnCtx } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { suppliersSelectlist } from '@/api/suppliers'

const router = useRouter()
const route = useRoute()
interface RuleForm {
  erpCode: string
  supplierName: string
  tenantId: string
  phone: string
  vatRegistrationNumber: string
  fax: string
  country: string
  province: string
  city: string
  streetSign: string
  language: string
  postcode: string
  website: string
  accountGroup: string
  headerDescription: string
  createBy: string
  createTime: string
  updateBy: string
  updateTime: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
  erpCode: '',
  supplierName: '',
  tenantId: '',
  phone: '',
  vatRegistrationNumber: '',
  fax: '',
  country: '',
  province: '',
  city: '',
  streetSign: '',
  language: '',
  postcode: '',
  website: '',
  accountGroup: '',
  headerDescription: '',
  createBy: '',
  createTime: '',
  updateBy: '',
  updateTime: ''
})

if (route.query.id) {
  const data = {
    erpCode: route.query.id
  }
  suppliersSelectlist(data).then((data) => {
    ruleForm.value = data.data.records[0]
    console.log(ruleForm.value)
  })
}

const back = () => {
  router.push({
    name: 'watermark',
    query: {}
  })
}

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  activeIndex.value = key
}

interface Product {
  name: string
  tel: string
  phone: string
  email: string
  remarks: string
}
const tableData = ref<Product[]>([
  {
    name: '明腾',
    tel: '18002882962',
    phone: '18002882962',
    email: '18002882962@163.com',
    remarks: '无'
  }
])
</script>

<style lang="scss" scoped>
.box {
  background: #f8f8f8;
  width: 100%;
  height: 89vh;
  box-sizing: border-box;
  padding: 15px 0;
}
.reback {
  margin-bottom: 15px;
  border-bottom: 2px solid #e0e3e9;
  padding-bottom: 10px;
  cursor: pointer;
}
.material-information {
  width: 98%;
  margin: 0px auto;
  background: #fff;
  border-radius: 10px;
  max-height: 430px;
  box-sizing: border-box;
  padding: 1rem 3rem;
}
.demo-ruleForm::after {
  content: '';
  width: 30%;
  height: 50px;
  /* background-color: #eeeeee; */
}
.suppliers-title {
  display: flex;
  padding-top: 0;
  font-size: 22px;
  font-family: initial;
}
.line {
  width: 5px;
  height: 22px;
  background-color: #578c43;
  margin-right: 10px;
}
.material-addinformation {
  width: 98%;
  margin: 0px auto;
  background: #fff;
  border-radius: 10px;
  max-height: 70vh;
  box-sizing: border-box;
  margin-top: 20px;
  padding: 3rem;
}
::v-deep .el-form-item--default {
  margin-bottom: 10px;
}
.materialinput {
  width: 30%;
  font-size: 18px;
}
.nemulist {
  --el-menu-bg-color: #fff !important;
  margin-top: 10px;
  border-bottom: 2px solid #e4e7ed;
}
.el-menu-item:hover {
  background-color: #fff !important;
  --el-menu-text-color: #333 !important;
  --el-menu-active-color: #578c43 !important;
  color: #578c43 !important;
}
.el-menu-item.is-active {
  background-color: #fff !important;
  color: #578c43 !important;
  border-bottom: 2px solid #578c43 !important;
}
.el-menu-item {
  color: #333 !important;
  position: relative;
  bottom: -2px;
}
</style>
